import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { EventRow } from "@/components/event-row";
import { FieldChanges } from "@/components/field-changes";
import { LiveFeed } from "@/components/live-feed";
import { Badge, Bar, Chip, Empty, ExtLink, Flag, Heatmap, PageHeader, Panel, Score, Stat, Table, Tabs, Td, TierBadge, TypeChip } from "@/components/ui";
import { WatchButton } from "@/components/watch-button";
import { api, SITE_URL, type EntityDetail, type EntityInsights, type EventItem } from "@/lib/api";
import { agoIso, dayHeader, fmtInt, fmtScore, relTime, typeLabel, utcDate, utcDateTime, utcTime, withinLast } from "@/lib/format";

export const dynamic = "force-dynamic";

type Tab = "overview" | "live" | "sources" | "silent" | "timeline" | "related" | "metrics";
const TABS: Tab[] = ["overview", "live", "sources", "silent", "timeline", "related", "metrics"];
const RANGES: { key: string; label: string; ms: number | null }[] = [
  { key: "1h", label: "1 h", ms: 3600e3 },
  { key: "6h", label: "6 h", ms: 6 * 3600e3 },
  { key: "24h", label: "24 h", ms: 24 * 3600e3 },
  { key: "7d", label: "7 d", ms: 7 * 86400e3 },
  { key: "30d", label: "30 d", ms: 30 * 86400e3 },
  { key: "all", label: "All", ms: null },
];

type Search = { tab?: string; range?: string; cursor?: string };

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const d = await api.entity(id);
  if (!d) return { title: "Entity not found" };
  const e = d.entity;
  const desc = e.description ?? `Every meaningful change WebSensor detected for ${e.name}: announcements, releases, pricing, documentation, incidents and silent changes — with evidence.`;
  return { title: `${e.name} — ${typeLabel(e.type)}`, description: desc, alternates: { canonical: `/entity/${e.id}` }, openGraph: { title: `${e.name} · WebSensor`, description: desc, url: `${SITE_URL}/entity/${e.id}` } };
}

const EMPTY_INSIGHTS: EntityInsights = { heatmap: [], baseline_per_day: 0, today: 0, events_24h: 0, events_prev_24h: 0, velocity_ratio: 0, anomaly: { score: 0, ratio: 0, pct: 0 }, silent_24h: 0, breaking_24h: 0, sources_24h: 0, most_active_sensors: [], rank: { rank: null, total: 0, score: null } };

function mainCountry(d: EntityDetail): string | null {
  const counts = new Map<string, number>();
  for (const s of d.sources) if (s.country) counts.set(s.country, (counts.get(s.country) ?? 0) + (s.first_party ? 2 : 1));
  let best: string | null = null;
  let n = 0;
  for (const [c, k] of counts) if (k > n) [best, n] = [c, k];
  return best;
}

export default async function EntityPage({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<Search> }) {
  const { id } = await params;
  const sp = await searchParams;
  const d = await api.entity(id);
  if (!d) notFound();
  const e = d.entity;
  const tab: Tab = TABS.includes(sp.tab as Tab) ? (sp.tab as Tab) : "overview";
  const ins = d.insights ?? EMPTY_INSIGHTS;
  const silent = d.silent ?? [];
  const related = d.related ?? [];
  const country = mainCountry(d);
  const active = withinLast(e.last_event_at, 7 * 86400e3);
  const anomalous = ins.anomaly.score >= 60;
  const delta = ins.events_24h - ins.events_prev_24h;
  const href = (t: Tab): string => (t === "overview" ? `/entity/${e.id}` : `/entity/${e.id}?tab=${t}`);

  return (
    <>
      <PageHeader
        compact
        kicker={
          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <TypeChip type={e.type} href={`/entities?tab=all&type=${e.type}`} />
            {d.parent && (
              <Link href={`/entity/${d.parent.id}`} className="inline-flex items-center gap-1 text-fg-muted hover:text-fg" title={`Parent: ${d.parent.name}`}>
                <span className="text-fg-subtle">↑</span> {d.parent.name}
              </Link>
            )}
            {e.domain && <Link href={`/domain/${e.domain}`} className="font-mono text-fg-muted hover:text-fg hover:underline">{e.domain}</Link>}
            {country && <Flag code={country} className="text-[12px]" />}
            <Chip tone={active ? "signal" : "default"} className="font-mono font-semibold tracking-wider" title={active ? "Events detected in the last 7 days" : "No event in the last 7 days"}>
              <span className={`inline-block size-1.5 rounded-full ${active ? "bg-signal" : "bg-low"}`} /> {active ? "ACTIVE" : "QUIET"}
            </Chip>
            {ins.rank.rank !== null && (
              <span className="font-mono text-fg-muted tabular" title={`WebSensor rank score ${fmtScore(ins.rank.score)} — importance × activity × velocity × quality × confirmation`}>
                <span className="text-fg-subtle">WebSensor rank</span> <Link href="/entities" className="font-semibold text-fg hover:underline">#{fmtInt(ins.rank.rank)}</Link> <span className="text-fg-subtle">of {fmtInt(ins.rank.total)}</span>
              </span>
            )}
          </span>
        }
        title={e.name}
        description={e.description}
        actions={
          <>
            <WatchButton kind="entity" value={e.id} />
            <Link href={`/alerts?entity=${encodeURIComponent(e.id)}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Add to alert</Link>
            {(e.homepage || e.domain) && <ExtLink href={e.homepage ?? `https://${e.domain}`} className="text-[12px]">Website ↗</ExtLink>}
          </>
        }
      />

      <div className="mb-3 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line sm:grid-cols-3 xl:grid-cols-6">
        <div className="bg-panel">
          <Stat
            label="Activity 24 h"
            value={fmtInt(ins.events_24h)}
            hint={
              <span className={delta > 0 ? "text-signal" : delta < 0 ? "text-fg-subtle" : ""}>
                {delta > 0 ? "↑" : delta < 0 ? "↓" : "→"} {Math.abs(delta)} vs prev 24 h · ×{ins.velocity_ratio.toFixed(2)}
              </span>
            }
          />
        </div>
        <div className="bg-panel"><Stat label="Breaking 24 h" value={fmtInt(ins.breaking_24h)} tone={ins.breaking_24h > 0 ? "hot" : undefined} hint="signal ≥ 80" /></div>
        <div className="bg-panel"><Stat label="Silent 24 h" value={fmtInt(ins.silent_24h)} tone={ins.silent_24h > 0 ? "silent" : undefined} hint="no matching announcement" /></div>
        <div className="bg-panel"><Stat label="Sources 24 h" value={fmtInt(ins.sources_24h)} hint={`${fmtInt(d.sources.length)} linked`} /></div>
        <div className="bg-panel"><Stat label="30-day baseline" value={<>{ins.baseline_per_day.toFixed(1)}<span className="text-[11px] font-normal text-fg-subtle">/day</span></>} hint={`today ${fmtInt(ins.today)}`} /></div>
        <div className="bg-panel">
          <Stat
            label={anomalous ? "Anomalous activity" : "Anomaly"}
            value={ins.anomaly.score > 0 ? fmtScore(ins.anomaly.score) : "0"}
            tone={anomalous ? "hot" : ins.anomaly.score >= 40 ? "warn" : undefined}
            hint={<span className={anomalous ? "font-semibold text-hot" : ""}>{ins.anomaly.pct > 0 ? "+" : ""}{Math.round(ins.anomaly.pct)}% vs baseline</span>}
          />
        </div>
      </div>

      <div className="panel mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-3 py-2">
        <span className="label">35-day activity</span>
        <div className="min-w-0"><Heatmap days={ins.heatmap} /></div>
        <span className="ml-auto flex items-center gap-1 text-[10.5px] text-fg-subtle">
          less <span className="size-2.5 rounded-[2px] heat-1" /><span className="size-2.5 rounded-[2px] heat-2" /><span className="size-2.5 rounded-[2px] heat-3" /><span className="size-2.5 rounded-[2px] heat-4" /> more
          <span className="ml-2 size-2.5 rounded-[2px] heat-hot" /> ≥ 3 breaking
        </span>
      </div>

      <Tabs
        className="mb-3"
        current={tab}
        items={[
          { key: "overview", label: "Overview", href: href("overview") },
          { key: "live", label: "Live", href: href("live") },
          { key: "sources", label: "Sources", href: href("sources"), count: d.sources.length },
          { key: "silent", label: <span className={silent.length ? "text-silent" : ""}>Silent</span>, href: href("silent"), count: silent.length },
          { key: "timeline", label: "Timeline", href: href("timeline") },
          { key: "related", label: "Related", href: href("related"), count: related.length + d.children.length },
          { key: "metrics", label: "Metrics", href: href("metrics") },
        ]}
      />

      {tab === "overview" && <Overview d={d} ins={ins} />}
      {tab === "live" && <LiveFeed initial={d.recent} initialCursor={d.nextCursor ?? null} extraQuery={{ entity: e.id }} showTabs={false} title={`LIVE · ${e.name.toUpperCase()}`} />}
      {tab === "sources" && <SourcesTab d={d} />}
      {tab === "silent" && <SilentTab items={silent} name={e.name} />}
      {tab === "timeline" && <TimelineTab id={e.id} range={sp.range} cursor={sp.cursor} />}
      {tab === "related" && <RelatedTab d={d} />}
      {tab === "metrics" && <MetricsTab d={d} ins={ins} />}
    </>
  );
}

// ---------------------------------------------------------------------------------------

function Overview({ d, ins }: { d: EntityDetail; ins: EntityInsights }) {
  const e = d.entity;
  const related = d.related ?? [];
  return (
    <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
      <Panel title={<>Recent signals <span className="font-mono text-fg-subtle">{d.recent.length}</span></>} dense action={<Link href={`/entity/${e.id}?tab=timeline`} className="text-[11px] text-fg-subtle hover:text-fg">full timeline →</Link>}>
        {d.recent.length ? d.recent.map((ev) => <EventRow key={ev.id} ev={ev} showDate />) : <Empty>No event detected yet for {e.name}. Sensors linked to this entity are checked continuously.</Empty>}
      </Panel>
      <aside className="flex min-w-0 flex-col gap-4">
        <SensorsPanel sensors={ins.most_active_sensors} />
        <Panel title="Related entities" dense>
          {related.length ? (
            <div className="flex flex-wrap gap-1 p-2">
              {related.slice(0, 16).map((r) => (
                <Chip key={r.id} href={`/entity/${r.id}`} title={`${typeLabel(r.type)} · ${r.shared_events} shared event${r.shared_events === 1 ? "" : "s"}`}>
                  {r.name} <span className="font-mono text-fg-subtle tabular">{r.shared_events}</span>
                </Chip>
              ))}
            </div>
          ) : (
            <Empty>No co-occurring entity yet.</Empty>
          )}
        </Panel>
        {d.children.length > 0 && (
          <Panel title={<>Products & children <span className="font-mono text-fg-subtle">{d.children.length}</span></>} dense>
            <ul className="divide-y divide-line">
              {d.children.slice(0, 12).map((c) => (
                <li key={c.id} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[12.5px]">
                  <Link href={`/entity/${c.id}`} className="min-w-0 truncate font-medium hover:underline">{c.name}</Link>
                  <span className="shrink-0 font-mono text-[11px] text-fg-subtle tabular">{typeLabel(c.type)} · {fmtInt(c.event_count)}</span>
                </li>
              ))}
              {d.children.length > 12 && <li className="px-3 py-1.5 text-[11px] text-fg-subtle"><Link href={`/entity/${e.id}?tab=related`} className="hover:text-fg">+{d.children.length - 12} more →</Link></li>}
            </ul>
          </Panel>
        )}
        {d.relations.length > 0 && (
          <Panel title="Knowledge graph" dense>
            <ul className="divide-y divide-line">
              {d.relations.slice(0, 10).map((r, i) => (
                <li key={`${r.from_id}-${r.relation}-${r.to_id}-${i}`} className="flex flex-wrap items-center gap-x-1.5 px-3 py-1.5 text-[12.5px]">
                  <Link href={`/entity/${r.from_id}`} className={r.from_id === e.id ? "text-fg-muted" : "font-medium hover:underline"}>{r.from_name}</Link>
                  <span className="font-mono text-[10.5px] uppercase tracking-wider text-fg-subtle">{r.relation.replace(/_/g, " ")}</span>
                  <Link href={`/entity/${r.to_id}`} className={r.to_id === e.id ? "text-fg-muted" : "font-medium hover:underline"}>{r.to_name}</Link>
                  <Chip className="ml-auto">{typeLabel(r.to_type)}</Chip>
                </li>
              ))}
            </ul>
          </Panel>
        )}
        {d.aliases.length > 0 && (
          <Panel title="Aliases">
            <div className="flex flex-wrap gap-1">{d.aliases.map((a) => <Chip key={a} className="font-mono">{a}</Chip>)}</div>
          </Panel>
        )}
      </aside>
    </div>
  );
}

function SensorsPanel({ sensors, title = "Most active sensors · 7 d" }: { sensors: EntityInsights["most_active_sensors"]; title?: string }) {
  return (
    <Panel title={title} dense>
      {sensors.length ? (
        <ul className="divide-y divide-line">
          {sensors.slice(0, 8).map((s) => (
            <li key={s.id} className="grid grid-cols-[1fr_auto_2.5rem] items-center gap-x-2 px-3 py-1.5 text-[12.5px] hover:bg-panel-2/60">
              <div className="min-w-0">
                <Link href={`/sensor/${s.id}`} className="block truncate font-medium hover:underline">{s.name}</Link>
                <div className="flex min-w-0 items-center gap-1.5 font-mono text-[10.5px] text-fg-subtle tabular">
                  <Link href={`/source/${s.source_id}`} className="truncate uppercase tracking-wide hover:text-fg">{s.source_id}</Link>
                  <span className="shrink-0">· {relTime(s.last_event_at)}</span>
                </div>
              </div>
              <Chip className="font-mono">{s.type}</Chip>
              <span className="text-right font-mono text-[12px] font-semibold text-signal tabular" title="Events in the last 7 days">{s.events_7d}</span>
            </li>
          ))}
        </ul>
      ) : (
        <Empty>No sensor produced an event for this entity in the last 7 days.</Empty>
      )}
    </Panel>
  );
}

function SourcesTab({ d }: { d: EntityDetail }) {
  return (
    <Panel title={<>Monitored sources <span className="font-mono text-fg-subtle">{d.sources.length}</span></>} dense>
      {d.sources.length === 0 ? (
        <Empty>No monitored source is linked to {d.entity.name} yet. Events still resolve to it from third-party coverage.</Empty>
      ) : (
        <Table head={["Source", "Tier", "Evidence", "Country", "Sensors", "24 h", ""]}>
          {[...d.sources].sort((a, b) => (b.events_24h ?? 0) - (a.events_24h ?? 0) || Number(Boolean(b.first_party)) - Number(Boolean(a.first_party))).map((s) => (
            <tr key={s.id} className="hover:bg-panel-2/60">
              <Td>
                <Link href={`/source/${s.id}`} className="font-medium hover:underline">{s.name}</Link>
                <div className="truncate font-mono text-[11px] text-fg-subtle">{s.domain}</div>
              </Td>
              <Td><TierBadge tier={s.tier} /></Td>
              <Td>{s.first_party ? <Badge kind="first-party" /> : <Badge kind="external" />}</Td>
              <Td>{s.country ? <span className="inline-flex items-center gap-1.5"><Flag code={s.country} /><span className="font-mono text-[11px] text-fg-subtle">{s.country}</span></span> : <span className="text-fg-subtle">—</span>}</Td>
              <Td mono>{s.sensor_count ?? 0}</Td>
              <Td mono className={s.events_24h ? "text-signal" : "text-fg-subtle"}>{s.events_24h ?? 0}</Td>
              <Td className="text-right"><Link href={`/source/${s.id}`} className="whitespace-nowrap text-[11.5px] text-fg-subtle hover:text-fg">sensors →</Link></Td>
            </tr>
          ))}
        </Table>
      )}
    </Panel>
  );
}

function SilentTab({ items, name }: { items: EventItem[]; name: string }) {
  return (
    <Panel title={<span className="inline-flex items-center gap-2"><Badge kind="silent" /> Silent changes <span className="font-mono text-fg-subtle">{items.length}</span></span>} dense action={<Link href={`/live?entity=${encodeURIComponent(name)}&silent_change=true`} className="hidden text-[11px] text-fg-subtle hover:text-fg sm:inline">all silent →</Link>}>
      {items.length === 0 ? (
        <Empty>No silent changes detected in this period.</Empty>
      ) : (
        <ul className="divide-y divide-line">
          {items.map((ev) => (
            <li key={ev.id} className="grid grid-cols-[auto_1fr] gap-x-3 border-l-2 border-l-silent/60 px-3 py-2 sm:grid-cols-[6.25rem_1fr_auto]">
              <div className="flex flex-col font-mono text-[11px] leading-4 text-fg-subtle tabular">
                <time dateTime={ev.detected_at} title={utcDateTime(ev.detected_at)} className="text-fg-muted">{utcTime(ev.detected_at)}</time>
                <span>{utcDate(ev.detected_at)}</span>
              </div>
              <div className="min-w-0 sm:col-start-2">
                <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px]">
                  <Link href={`/source/${ev.source?.id ?? ev.source_id}`} className="font-mono font-semibold uppercase tracking-wide text-fg-muted hover:text-fg">{ev.source?.name ?? ev.source_id}</Link>
                  {ev.country && <Flag code={ev.country} />}
                  <span className="sm:hidden"><Score value={ev.signal_score ?? ev.importance} size="sm" kind="signal" /></span>
                  <Chip>{typeLabel(ev.event_type)}</Chip>
                  {ev.change_class && <Chip tone="silent">{ev.change_class}</Chip>}
                </div>
                <Link href={`/event/${ev.slug}`} className="mt-0.5 block font-medium leading-snug hover:underline">{ev.title}</Link>
                {ev.field_changes && ev.field_changes.length > 0 ? (
                  <div className="mt-1.5 max-w-3xl"><FieldChanges items={ev.field_changes} compact max={4} /></div>
                ) : (
                  ev.summary && <p className="mt-0.5 line-clamp-2 text-[12.5px] text-fg-muted">{ev.summary}</p>
                )}
              </div>
              <div className="hidden items-start pt-0.5 sm:flex"><Score value={ev.signal_score ?? ev.importance} kind="signal" /></div>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}

async function TimelineTab({ id, range, cursor }: { id: string; range?: string; cursor?: string }) {
  const r = RANGES.find((x) => x.key === range) ?? RANGES[2]!;
  const after = r.ms ? agoIso(r.ms) : undefined;
  const page = await api.events({ entity: id, after, limit: 100, cursor });
  const groups = new Map<string, EventItem[]>();
  for (const ev of page.items) {
    const day = utcDate(ev.detected_at);
    if (!groups.has(day)) groups.set(day, []);
    groups.get(day)!.push(ev);
  }
  const rangeHref = (k: string): string => `/entity/${id}?tab=timeline&range=${k}`;
  return (
    <Panel
      title={<>Timeline <span className="font-mono text-fg-subtle">{page.items.length}{page.nextCursor ? "+" : ""}</span></>}
      dense
      action={
        <nav className="flex items-center gap-0.5" aria-label="Range">
          {RANGES.map((x) => (
            <Link key={x.key} href={rangeHref(x.key)} aria-current={x.key === r.key ? "page" : undefined} className={`rounded-sm px-1.5 py-px font-mono text-[11px] tabular ${x.key === r.key ? "bg-panel-2 text-fg" : "text-fg-subtle hover:text-fg"}`}>{x.label}</Link>
          ))}
        </nav>
      }
    >
      {page.items.length === 0 ? (
        <Empty>No event in the last {r.label.replace(" ", "")}{r.ms ? "" : " — nothing recorded yet"}. Try a wider range.</Empty>
      ) : (
        <div>
          {[...groups.entries()].map(([day, evs]) => (
            <div key={day}>
              <div className="sticky top-12 z-10 flex items-center justify-between border-y border-line bg-panel-2/95 px-3 py-1 font-mono text-[11px] font-semibold tracking-wider text-fg-muted backdrop-blur">
                <span>{dayHeader(evs[0]!.detected_at)}</span>
                <span className="font-normal text-fg-subtle tabular">{evs.length}</span>
              </div>
              {evs.map((ev) => <EventRow key={ev.id} ev={ev} />)}
            </div>
          ))}
        </div>
      )}
      <div className="flex items-center justify-between px-3 py-2 text-[12px] text-fg-subtle">
        <span>{after ? <>since <span className="font-mono tabular">{utcDateTime(after)}</span></> : "complete history, newest first"}</span>
        {page.nextCursor && <Link href={`${rangeHref(r.key)}&cursor=${encodeURIComponent(page.nextCursor)}`} className="rounded-md border border-line bg-panel-2 px-2.5 py-1 text-fg hover:border-line-strong">Older →</Link>}
      </div>
    </Panel>
  );
}

function RelatedTab({ d }: { d: EntityDetail }) {
  const related = d.related ?? [];
  const max = Math.max(1, ...related.map((r) => r.shared_events));
  return (
    <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
      <Panel title={<>Co-occurring entities <span className="font-mono text-fg-subtle">{related.length}</span></>} dense>
        {related.length === 0 ? (
          <Empty>No entity shares an event with {d.entity.name} yet.</Empty>
        ) : (
          <Table head={["Entity", "Type", "Shared events", ""]}>
            {related.map((r) => (
              <tr key={r.id} className="hover:bg-panel-2/60">
                <Td><Link href={`/entity/${r.id}`} className="font-medium hover:underline">{r.name}</Link></Td>
                <Td><Chip>{typeLabel(r.type)}</Chip></Td>
                <Td mono>{r.shared_events}</Td>
                <Td className="w-32 min-w-24 pt-3"><Bar value={r.shared_events} max={max} tone="info" /></Td>
              </tr>
            ))}
          </Table>
        )}
      </Panel>
      <div className="flex flex-col gap-4">
        <Panel title={<>Products & children <span className="font-mono text-fg-subtle">{d.children.length}</span></>} dense>
          {d.children.length === 0 ? (
            <Empty>No child entity.</Empty>
          ) : (
            <Table head={["Entity", "Type", "Events", "Last"]}>
              {d.children.map((c) => (
                <tr key={c.id} className="hover:bg-panel-2/60">
                  <Td><Link href={`/entity/${c.id}`} className="font-medium hover:underline">{c.name}</Link></Td>
                  <Td><Chip>{typeLabel(c.type)}</Chip></Td>
                  <Td mono>{fmtInt(c.event_count)}</Td>
                  <Td mono className="whitespace-nowrap text-fg-subtle">{c.last_event_at ? relTime(c.last_event_at) : "—"}</Td>
                </tr>
              ))}
            </Table>
          )}
        </Panel>
        <Panel title={<>Knowledge graph <span className="font-mono text-fg-subtle">{d.relations.length}</span></>} dense>
          {d.relations.length === 0 ? (
            <Empty>No relation recorded.</Empty>
          ) : (
            <ul className="divide-y divide-line">
              {d.relations.map((r, i) => (
                <li key={`${r.from_id}-${r.relation}-${r.to_id}-${i}`} className="flex flex-wrap items-center gap-x-1.5 px-3 py-1.5 text-[12.5px]">
                  <Link href={`/entity/${r.from_id}`} className={r.from_id === d.entity.id ? "text-fg-muted" : "font-medium hover:underline"}>{r.from_name}</Link>
                  <span className="font-mono text-[10.5px] uppercase tracking-wider text-fg-subtle">{r.relation.replace(/_/g, " ")}</span>
                  <Link href={`/entity/${r.to_id}`} className={r.to_id === d.entity.id ? "text-fg-muted" : "font-medium hover:underline"}>{r.to_name}</Link>
                  <Chip className="ml-auto">{typeLabel(r.to_type)}</Chip>
                </li>
              ))}
            </ul>
          )}
        </Panel>
        {d.aliases.length > 0 && (
          <Panel title="Aliases">
            <div className="flex flex-wrap gap-1">{d.aliases.map((a) => <Chip key={a} className="font-mono">{a}</Chip>)}</div>
          </Panel>
        )}
      </div>
    </div>
  );
}

function MetricsTab({ d, ins }: { d: EntityDetail; ins: EntityInsights }) {
  const maxType = Math.max(1, ...d.by_type.map((t) => t.n));
  const total = d.by_type.reduce((n, t) => n + t.n, 0);
  const anomalous = ins.anomaly.score >= 60;
  const days7 = ins.heatmap.slice(-7).reduce((n, x) => n + x.events, 0);
  const days35 = ins.heatmap.reduce((n, x) => n + x.events, 0);
  const peak = ins.heatmap.reduce<{ day: string; events: number } | null>((best, x) => (!best || x.events > best.events ? { day: x.day, events: x.events } : best), null);
  return (
    <div className="grid gap-4 xl:grid-cols-[1fr_1fr]">
      <div className="flex flex-col gap-4">
        <Panel title={<>Event types <span className="font-mono text-fg-subtle">{fmtInt(total)}</span></>}>
          {d.by_type.length ? (
            <ul className="space-y-1.5">
              {d.by_type.map((t) => (
                <li key={t.event_type} className="grid grid-cols-[9rem_1fr_3.5rem] items-center gap-2 text-[12px] sm:grid-cols-[11rem_1fr_3.5rem]">
                  <Link href={`/live?entity=${encodeURIComponent(d.entity.id)}&event_type=${t.event_type}`} className="truncate hover:underline">{typeLabel(t.event_type)}</Link>
                  <Bar value={t.n} max={maxType} tone="info" />
                  <span className="text-right font-mono text-fg-subtle tabular">{t.n} <span className="text-[10.5px]">{total ? Math.round((t.n / total) * 100) : 0}%</span></span>
                </li>
              ))}
            </ul>
          ) : (
            <Empty>No events yet.</Empty>
          )}
        </Panel>
        <SensorsPanel sensors={ins.most_active_sensors} />
      </div>
      <div className="flex flex-col gap-4">
        <Panel title="Anomaly">
          <div className="flex items-baseline justify-between">
            <span className={`font-mono text-3xl font-semibold tabular ${anomalous ? "text-hot" : ins.anomaly.score >= 40 ? "text-warn" : "text-fg"}`}>{ins.anomaly.score > 0 ? fmtScore(ins.anomaly.score) : "0"}</span>
            <span className={`label ${anomalous ? "!text-hot" : ""}`}>{anomalous ? "ANOMALOUS ACTIVITY" : ins.anomaly.score >= 40 ? "ELEVATED" : "NORMAL"}</span>
          </div>
          <div className="mt-2"><Bar value={ins.anomaly.score} tone={anomalous ? "hot" : ins.anomaly.score >= 40 ? "high" : "signal"} /></div>
          <dl className="mt-3 grid grid-cols-2 gap-y-1 text-[12.5px]">
            <dt className="text-fg-subtle">30-day baseline</dt><dd className="text-right font-mono tabular">{ins.baseline_per_day.toFixed(1)} events/day</dd>
            <dt className="text-fg-subtle">Last 24 h</dt><dd className="text-right font-mono tabular">{fmtInt(ins.events_24h)} events</dd>
            <dt className="text-fg-subtle">Previous 24 h</dt><dd className="text-right font-mono tabular">{fmtInt(ins.events_prev_24h)} events</dd>
            <dt className="text-fg-subtle">Velocity ratio</dt><dd className="text-right font-mono tabular">×{ins.velocity_ratio.toFixed(2)}</dd>
            <dt className="text-fg-subtle">vs baseline</dt><dd className={`text-right font-mono tabular ${anomalous ? "font-semibold text-hot" : ""}`}>{ins.anomaly.pct > 0 ? "+" : ""}{Math.round(ins.anomaly.pct)}% (×{ins.anomaly.ratio.toFixed(2)})</dd>
          </dl>
          <p className="mt-3 text-[12px] leading-relaxed text-fg-muted">
            The anomaly score compares the last 24 h with this entity&apos;s own 30-day baseline, so a busy organization is not flagged for being busy. Scores ≥ 60 mark anomalous activity; the ratio above 1 means more events than usual.
          </p>
        </Panel>
        <Panel title="35-day activity">
          <Heatmap days={ins.heatmap} />
          <dl className="mt-3 grid grid-cols-3 gap-2 text-[12.5px]">
            <div><dt className="label">7 d</dt><dd className="font-mono text-base font-semibold tabular">{fmtInt(days7)}</dd></div>
            <div><dt className="label">35 d</dt><dd className="font-mono text-base font-semibold tabular">{fmtInt(days35)}</dd></div>
            <div className="min-w-0"><dt className="label">Peak day</dt><dd className="truncate font-mono text-base font-semibold tabular">{peak && peak.events ? <>{peak.events} <span className="text-[11px] font-normal text-fg-subtle">{peak.day}</span></> : "—"}</dd></div>
          </dl>
        </Panel>
        <div className="grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line">
          <div className="bg-panel"><Stat label="Total events" value={fmtInt(d.entity.event_count)} hint={d.entity.last_event_at ? `last ${relTime(d.entity.last_event_at)}` : "none yet"} /></div>
          <div className="bg-panel"><Stat label="Entity importance" value={fmtScore(d.entity.importance)} hint="weight in scoring" /></div>
        </div>
      </div>
    </div>
  );
}